<template>
  <div style="height: 100%; width: 100%">
    <div class="codeCanvas" style="height: 100%; width: 100%"></div>
  </div>
</template>

 <script>
export default {
  name: "basicIncome",
  props: {
    numberEchart: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    numberEchart(val) {
      this.getPie(val);
    },
  },
  methods: {
    getPie(val) {
      const that = this;
      var myChart = this.$echarts.init(document.querySelector(".codeCanvas"));
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: "{b} {c}%",
        },

        grid: {
          left: "20px",
          right: "20px",
          // bottom:'20px',
          top: "20px",
        },
        xAxis: {
          type: "category",
          data: val.xAxis,
          axisLabel: {
            interval: 0,
            rotate: 33,
            fontSize: "12px",
          },
        },
        yAxis: {
          type: "value",
          min: 0,
          splitLine: { show: false }, //去除网格线
          axisLabel: {
            formatter: "{value}%",
            show: false,
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          axisLine: {
            //y轴
            show: false,
          },
        },
        series: {
          type: "bar",
          name: "DICT收入",
          data: val.yAxis,
          barWidth: 20,
          itemStyle: {
            normal: {
              color: function (params) {
                var c = "";
                var index = val.xAxis.indexOf("浙江");
                if (params.dataIndex == index) {
                  c = "#c00000";
                } else {
                  c = "#0070c0";
                }
                return c;
              },
              label: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#0070c0",
                },
                formatter: "{c}%",
              },
            },
          },
        },
      };
      myChart.setOption(option);
    },
  },
};
</script>

 <style>
</style>
